<template>
  <div>
<!--    <h1>{{movie_id}}</h1>-->
    <el-image :src="url" class="cover"></el-image>
    <div v-if="isAct == 1" class="right-block">
      <h2>影院列表</h2>
      <el-row v-for="o in cinemaList">
        <el-card class="box-card list-item">
          <div slot="header" class="clearfix">
            <span>{{o.name}}</span>
          </div>
          <div class="loc">{{o.location}}</div>
          <div>{{o.time}}</div>
<!--          <div>{{o.seats}}</div>-->
          <a class="buynow" @click="gotoTicket(o.seats, o.id)">购 票</a>
        </el-card>
      </el-row>
    </div>
    <div v-if="isAct == 2" class="right-block">
      <h2>影片简介</h2>
      <p>{{movie.name}}</p>
      <p>{{movie.intro}}</p>
      <p>{{movie.length}}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "moviePage",
  data(){
    return{
      movie_id:this.$route.query.id,
      movie:'',
      cinemaList:'',
      isAct:1,
      user:'',
      url:"http://movie.chenyangdu.xyz:8081/image/movie?id="+this.$route.query.id,
      activeName: 'second',
      cinema:[
        {name:'京港影城万达院线加盟店', location:'丰台区光彩路京港城生活广场6楼（京深海鲜市场对面)'},
        {name:'大观楼电影院', location:'西城区前门大街大栅栏街36号'},
        {name:'SFC上影影城（房山绿地缤纷城店）', location:'房山区拱辰街道天星街1号院7号楼绿地缤纷城F3层'},
        {name:'枫花园汽车电影院（朝阳公园店）', location:'朝阳区亮马桥路21号（朝阳公园北门对面）'},
        {name:'京港影城万达院线加盟店', location:'丰台区光彩路京港城生活广场6楼（京深海鲜市场对面)'},
        {name:'大观楼电影院', location:'西城区前门大街大栅栏街36号'},
        {name:'SFC上影影城（房山绿地缤纷城店）', location:'房山区拱辰街道天星街1号院7号楼绿地缤纷城F3层'},
        {name:'枫花园汽车电影院（朝阳公园店）', location:'朝阳区亮马桥路21号（朝阳公园北门对面）'},

      ]
    }
  },
  methods:{
    test(){
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    gotoTicket(seats, session_id){
      this.$router.push(
          {
            path:'/ticket',
            query:{seats, session_id}
          }
      )
    }
  },
  computed:{

  },
  created() {
    // this.movie_id = this.$route.query.id;
    console.log(this.url)
    console.log(this.$route.query.id)
    console.log(JSON.parse(localStorage.getItem("user")))
    this.user = JSON.parse(localStorage.getItem("user"));
    console.log(this.user.id)
    // for (let x in localStorage.getItem("user")){
    //   console.log(x);
    // }
    axios({
      url:'/movie/get',
      params:{
        id:this.$route.query.id,
      }
    }).then((r)=>{
      r = r.data;
      if (r.code === 200) {
        this.movie = r.data;
        console.log(this.movie);
      }
    })
    axios({
      url:'/movie/cinemaList',
      params:{
        movie_id:this.$route.query.id,
      }
    }).then((r)=>{
      r = r.data;
      if (r.code === 200) {
        this.cinemaList = r.data;
        console.log(this.cinemaList[0])
      }
    })
  }
}
</script>

<style scoped>
.cover{
  width: 666px;
  position: fixed;
  left: 0;
  top: 0;
}
.right-block{
  //background-color: #1c7430;
  width: 1100px;
  height: 100%;
  position: absolute;
  left: 761px;
  top: 0;
}
.list-item {
  width: 90%;
  height: 170px;
  margin-top: 20px;
  margin-left: 40px;
  //position: absolute;
}
.clearfix{
  font-size: 18px;
  font-weight: bolder;
}
.loc {
  color: gray;

}

.buynow {
  max-width: 160px;
  width: 100%;
  padding: 15px 0px;
  font-size: 20px;
  line-height: 20px;
  font-weight: 500;
  background: #ee3e0f;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
  transition: all .4s ease-in;
  text-decoration: none;
}

.buynow:hover {
  background: #000;
  color: #fff;
  transition: all .4s ease-in;
  border-radius: 30px;
  cursor:pointer
}

</style>